<template>
	<view style="padding-bottom: 60rpx;">
		<view>
			<view class="inputContent">
				<view class="inputLeft">姓名</view>
				<view class="inputRight">

					<input type="text" placeholder="请填写姓名" placeholder-style="text-align:right" />
				</view>
			</view>
			<view class="inputContent">
				<view class="inputLeft">性别</view>
				<view class="inputRight">

					<radio-group @change="RadioChange">
						<radio class="blue" :class="radio=='男'?'checked':''" :checked="radio=='男'?true:false" value="男"
							style="transform: scale(0.7);"></radio>男
						<radio class="blue" :class="radio=='女'?'checked':''" :checked="radio=='女'?true:false" value="女"
							style="margin-left: 10rpx;transform: scale(0.7);"></radio>女
					</radio-group>
				</view>
			</view>

			<view class="inputContent">
				<view class="inputLeft">手机号</view>
				<view class="inputRight">

					<input type="text" placeholder="请填写手机号" placeholder-style="text-align:right" />

				</view>
			</view>
			<view class="inputContent">
				<view class="inputLeft">身份证号</view>

				<view class="inputRight">
					<input type="text" placeholder="请填写身份照号" placeholder-style="text-align:right" />

				</view>
			</view>
			<view class="inputContent">
				<view class="inputLeft">服务包进度</view>
				<view class="inputRight" style="display: flex;" @tap="selectorVisible=true">
					<view>
						{{servicePack?servicePack:'请选择服务包'}}
					</view>
					<view>
						<image src="../../static/images/rightArrows.png" mode="" style="width:20px;height: 20px;">
						</image>
					</view>
				</view>
			</view>




			<view class="inputContent1">
				<view class="inputLeft">请填写详细地址</view>

				<view class="inputRight">

					<textarea placeholder="请填写详细地址"></textarea>

				</view>
			</view>


			<view class="inputContent">
				<view class="inputLeft">请选择随访表(多选)</view>

				<view class="inputRight" style="display: flex;" @tap="show=true">
					<view>
						{{info?info:'请选择随访表'}}
					</view>
					<view>
						<image src="../../static/images/rightArrows.png" mode="" style="width:20px;height: 20px;">
						</image>
					</view>
				</view>
			</view>




		</view>
		<view class="btnView"  @tap="goFill">去填写</view>


		<w-picker :visible.sync="selectorVisible" mode="selector" value="服务包1" default-type="name"
			:default-props="defaultProps" :options="selectorList" @confirm="onConfirmPicker($event,'selector')"
			@cancel="onCancelPicker" ref="selector"></w-picker>
		<multiple-select v-model="show" :data="list" @confirm="confirm"></multiple-select>

	</view>
</template>

<script>
	import multipleSelect from "@/components/multiple-select/multiple-select.vue";
	export default {
		components: {
			multipleSelect,
		},
		data() {
			return {
				list: [
					{label:'第一个',value:'1'},
					{label:'第二个',value:'2'},
					{label:'第三个',value:'3'},
					{label:'第四个',value:'4'},
					{label:'第五个',value:'5'},
					{label:'第六个',value:'6'},
				], //数据源
				info: "",
				show: false, //是否显示 - 双向绑定
				radio: '',
				selectorVisible: false,
				servicePack: '',
				defaultProps: {
					label: "name",
					value: "id"
				},
				selectorList: [{
						name: "服务包1",
						id: "1"
					}, {
						name: "服务包2",
						id: "2"
					},
					{
						name: "服务包3",
						id: "3"
					},
					{
						name: "服务包4",
						id: "4"
					},
					{
						name: "服务包5",
						id: "5"
					}
				],
			}
		},
		methods: {
			
			goFill(){
				uni.navigateTo({
					url:'/pages/FollowUp/infoFill'
				})
			},

			// 确定事件
			confirm(data) {
				
				console.log(data)
				this.expertise = ""
				// data.forEach(item => {
				// 	if (this.expertise) {
				// 		this.expertise += "," + item.value
				// 	} else {
				// 		this.expertise += item.value
				// 	}
				// })
				console.log(this.expertise)
				console.log(this.fieldList)
				this.info = data.map(el => el.label).join(",");
				this.show = false
			},
			RadioChange(e) {
				console.log(2222222222)
				this.radio = e.detail.value
				console.log(this.radio)
			},
			onConfirmPicker(res, type) {
				this.servicePack = res.result;
			},
			onCancelPicker() {

			},
		}
	}
</script>

<style>
	.btnView {
		width: 670rpx;
		height: 80rpx;
		background: #5396E0;
		border-radius: 40rpx;
		margin: 40rpx auto;
		display: flex;
		align-items: center;
		justify-content: center;








		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;

	}

	.cameraFont {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		margin-left: 13rpx;
		margin-top: -5rpx;
	}

	.camera {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 670rpx;
		height: 170rpx;
		border: 1rpx solid #CCCCCC;
		margin: 0 auto;
		margin-top: 30rpx;
	}

	.cameraImg {
		width: 36rpx;
		height: 28rpx;
	}

	.anewSing {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FE0A0A;
		margin-top: 28rpx;
		margin-left: 25rpx;
	}

	.sing {
		display: flex;
		justify-content: space-around;
	}

	.inputLeft {
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
	}

	.inputRight {

		font-size: 26rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #989898;
	}

	.inputContent1 {
		padding: 18rpx 0 38rpx 18rpx;
		border-bottom: 1rpx solid #DCDCDC;
	}

	.inputContent {
		display: flex;
		justify-content: space-between;
		padding: 38rpx 40rpx 38rpx 38rpx;
		border-bottom: 1rpx solid #DCDCDC;
	}

	.headImg {
		display: flex;
		justify-content: center;
		padding-top: 48rpx;
	}

	.headImg image {
		width: 160rpx;
		height: 160rpx;

	}
</style>
